<template>
    <div>
        <!--面包屑导航区-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card v-if="!showDetail">
            <div class="filter-container">
                <el-button class="add-btn" type="primary" @click="openDialog" size="medium">添加商品</el-button>
                <el-select v-model="saleable" clearable placeholder="上架状态">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-cascader
                        :options="categories"
                        :props="props"
                        ref="cascader"
                        @change="changeCascader"
                         placeholder="请选择商品类目"
                         clearable></el-cascader>
                <el-select v-model="value" clearable placeholder="品牌">
                    <el-option
                            v-for="item in brands"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
                <div class="search-area">
                    <el-input class="search-input" v-model="key" placeholder="请输入内容"></el-input>
                    <el-button class="search-btn" type="primary" @click="handleSearch" size="medium">搜索</el-button>
                </div>
            </div>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        label="id"
                        prop="id">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="标题"
                        prop="title">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="商品分类"
                        prop="cname">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="品牌"
                        prop="bname">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="380px"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="enterDetail(scope.row.id)">详情</el-button>
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.row)">设为推荐</el-button>
                        <el-button
                                size="mini"
                                v-if="!scope.row.saleable"
                                type="success"
                                @click="putOn(scope.row)">上架</el-button>
                        <el-button
                                v-if="scope.row.saleable"
                                size="mini"
                                type="warning"
                                @click="putOn(scope.row)">下架</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="delGoods(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <el-pagination
                    class="pagination"
                    align="center"
                    background
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    layout="sizes,prev, pager, next"
                    :current-page = pageNum
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageSize"
                    :total="total">
            </el-pagination>
        </el-card>
        <GoodsDetail @showDetail="showDetails"
                     :currentDetail="currentDetail"
                     v-if="showDetail"></GoodsDetail>
        <!--添加商品的步骤条-->
        <AddGoods
                ref="addGoods"
                :categories="categories"
                :brands="brands"
                @getBrandByCid="getBrandByCid"
                @getGoodsList="getGoodsList"
        ></AddGoods>
    </div>
</template>

<script>
    export default {
        name: "Goods.vue",
        components:{
          AddGoods: ()=> import('./AddGoods'),
          GoodsDetail: ()=> import('./GoodsDetail')
        },
        data(){
            return{
                currentDetail:0,
                showDetail:false,
                pageNum:1,
                pageSize:10,
                total:1000,
                key:"",
                tableData: [],
                categories:[],
                currentCid:'',
                selectedBrand:'',
                props: {
                    label: 'name',
                    children: 'children',
                    value:'id'
                },
                brands:[],
                options: [{
                    value: '',
                    label: '全部'
                }, {
                    value: true,
                    label: '已上架'
                }, {
                    value: false,
                    label: '未上架'
                }],
                value: '',
                saleable:''
            }
        },
        methods:{
            enterDetail(id){
                this.currentDetail = id
                this.showDetails()
            },
            //商品详情
            showDetails(){
              this.showDetail = !this.showDetail
            },
            //分页所用
            handleCurrentChange(val){
                this.pageNum=val
                this.getGoodsList()
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.getGoodsList()
            },
            //获取商品表信息
            async getGoodsList(){
                let req = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    key:this.key,
                    bid:this.value,
                    cid:this.currentCid,
                    saleable:this.saleable
                }
                const res = await this.$http.post("/item/goods/getGoodsList",req)
                if (res.data.code !== "200") {
                    return this.$message.error('获取失败')
                }
                this.tableData = res.data.data.items
                this.total = res.data.data.total
            },
            //删除商品
            delGoods(row){
                this.$http.delete("/item/goods/spu/"+row.id).then((res)=>{
                    if (res.data.code !=="200"){
                        return this.$message.error('删除失败')
                    }
                    this.getGoodsList()
                    return this.$message.success('删除成功！')
                })
            },

            //打开新增窗口，加载类目树
            async getTree(){
                const res = await this.$http.get("/item/category/getCategoryTreeList")
                const tree = res.data.data
                this.categories = this.getNewTree(tree);
            },
            //去除空的子节点
            getNewTree(arr) {
                return arr.map(item => {
                    if (item.children.length > 0) {
                        this.getNewTree(item.children)
                    } else {
                        delete item.children
                    }
                    return item;
                })
            },
            // 级联菜单发生改变时触发
            changeCascader(){
                this.currentCid = this.$refs.cascader.getCheckedNodes().shift().value
                this.getBrandByCid(this.currentCid)
                this.value = ''
                console.log(this.$refs.cascader.getCheckedNodes())
            },

            async getBrandByCid(currentCid){
                const res = await this.$http.get("/item/brand/queryBrandByCid/"+currentCid)
                this.brands = res.data.data
            },
            //搜索按钮
            handleSearch(){
                this.getGoodsList()
            },
            //上下架
            async putOn(row){
                const res = await this.$http.get("/item/goods/spu/out/"+row.id)
                if (res.data.code !== "200") {
                    return this.$message.error('操作失败')
                }
                this.$message.success('操作成功！')
                await this.getGoodsList()
            },
            //显示添加对话框
            openDialog(){
                this.$refs.addGoods.showDialog()
                console.log("woca")
            }
        },
        created() {
            this.getGoodsList()
            this.getTree()
        }
    }
</script>

<style lang="less" scoped>
    .search-area{

            float: right;

        .search-input{
            height: 40px!important;
            width: 180px;
        }
        .search-btn{
            height: 40px;
            margin: 0 20px 0 0;
            width: 60px;
            float: right;
        }
    }
    .add-btn{
        height: 40px;
        float: left;
        margin-right: 40px;
    }
</style>
